<template>
	<form class="bind-mobile-modal px-[25px] md:px-[35px] pt-4 pb-10" @submit.prevent="onSubmit">
		<input type="submit" class="hidden" />
		<BaseInput
			labelT="account.mobile"
			v-model="formValue.mobile"
			:name="FormFieldName.mobile"
			:readonly="!!profileStore.userInfo?.mobile">
			<template #prefix-out>
				<div class="mr-2">
					<BaseSelect
						v-model="formValue.mobileArea"
						:options="appStore.mobileAreaOptions"
						class="w-[103px]"
						filterable
						filter-field="text"
						:popoverProps="{ placement: 'bottom-start' }"
						icon-class="!h-5"
						:disabled="!!profileStore.userInfo?.internationalAreaCode" />
				</div>
			</template>
		</BaseInput>
		<BaseInput
			labelT="account.mobileCode"
			v-model="formValue.verifyCode"
			:name="FormFieldName.verifyMobileCode">
			<template #suffix>
				<BaseCodePhone :area-code="formValue.mobileArea" :phone-number="formValue.mobile" />
			</template>
		</BaseInput>
		<BaseButton
			class="mt-10"
			type="primary"
			textT="action.confirm"
			:loading="loading"
			@click="onSubmit" />
	</form>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import { updateMobile } from '@/api/account.ts'
import { BaseButton, BaseCodePhone, BaseInput, BaseSelect } from '@/components/base'
import { FormFieldName } from '@/enums'
import { useRequest } from '@/hooks'
import { useAppStore, useProfileStore } from '@/store'
import { t } from '@/utils'

const appStore = useAppStore()
const profileStore = useProfileStore()
const formValue = reactive({
	mobile: profileStore.userInfo?.mobile || '',
	mobileArea: profileStore.userInfo?.internationalAreaCode || '',
	verifyCode: ''
})

const { run, loading } = useRequest(updateMobile, {
	showError: true,
	showSuccess: t('tip.verifySuccess'),
	onSuccess: () => {
		profileStore.getUserInfo()
		profileStore.show.mobile = false
	}
})
const onSubmit = () => {
	run({
		internationalAreaCode: formValue.mobileArea,
		mobile: formValue.mobile,
		code: formValue.verifyCode
	})
}
</script>

<style scoped></style>
